<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="chart">
        <title>Error Bars | Kendo UI Charts</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to configure the error bars of Kendo UI Charts, bind them to the series data and set their value.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/charts/features/error-bars.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/charts/features/error-bars.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="error-bars"><a href="#error-bars">Error Bars</a></h1>

<p>Error bars can be used to show variability of data. This article describes the way you can use them in a Kendo UI Chart widget.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<p>The Error bars are specified as part of the series definition and are supported for the following series types:</p>

<ul>
<li>Area</li>
<li>Vertical Area</li>
<li>Column</li>
<li>Bar</li>
<li>Line</li>
<li>Vertical Line</li>
<li>Scatter</li>
<li>ScatterLine</li>
</ul>

<p>The low and high value for the error bars can either be bound to the data or be calculated from the point or series values.</p>

<h2 id="data-binding"><a href="#data-binding">Data Binding</a></h2>

<h3 id="bind-to-categorical-series"><a href="#bind-to-categorical-series">Bind to Categorical Series</a></h3>

<p>To bind the error bars low and high values when using categorical series, set the <a href="/api/dataviz/chart#configuration-series.errorLowField"><code>errorLowField</code></a> and <a href="/api/dataviz/chart#configuration-series.errorHighField"><code>errorHighField</code></a> options to the fields in the data that hold the low and high value, as demonstrated below.</p>

<h6>Example</h6>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    type: "column",
    errorLowField: "low",
    errorHighField: "high",
    data: [{value: 4.743, low: 4.5, high: 5}, {value: 7.295, low: 7, high: 8},
      {value: 6.376, low: 5, high: 6.5}]
  }]
});
&lt;/script&gt;
</code></pre>

<h3 id="bind-to-scatter-series"><a href="#bind-to-scatter-series">Bind to Scatter Series</a></h3>

<p>Error bars can be displayed for the series <code>x</code> value, <code>y</code> value or both. To set the low and high fields for the series <code>x</code> value, set the <a href="/api/dataviz/chart#configuration-series.xErrorLowField"><code>xErrorLowField</code></a> and <a href="/api/dataviz/chart#configuration-series.xErrorHighField"><code>xErrorHighField</code></a> series options. The low and high fields for the series <code>y</code> value, can be specified with the <a href="/api/dataviz/chart#configuration-series.yErrorLowField"><code>yErrorLowField</code></a> and <a href="/api/dataviz/chart#configuration-series.yErrorHighField"><code>yErrorHighField</code></a> options.</p>

<p>The example below demonstrates how to bind the error bars for the series <code>x</code> value.</p>

<h6>Example</h6>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    xErrorLowField: "low",
    xErrorHighField: "high",
    data: [{x: 6.4, y: 13.4, low: 5, high: 7}, {x: 1.7, y: 11, low: 1, high: 3},
      {x: 5.4, y: 8, low: 3, high: 6}]
  }]
});
&lt;/script&gt;
</code></pre>

<p>The example below demonstrates how to bind the error bars for the series <code>y</code> value.</p>

<h6>Example</h6>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    yErrorLowField: "low",
    yErrorHighField: "high",
    data: [{x: 6.4, y: 13.4, low: 12, high: 14}, {x: 1.7, y: 11, low: 11, high: 14},
      {x: 5.4, y: 8, low: 5, high: 8}]
  }]
});
&lt;/script&gt;
</code></pre>

<h2 id="set-error-bars-value"><a href="#set-error-bars-value">Set Error Bars Value</a></h2>

<p>The error bars low and high value can be calculated based on the series point values. To set the error bars value for categorical series, specify the <a href="/api/dataviz/chart#configuration-series.errorBars.value"><code>series.errorBars.value</code></a> option. For scatter series set the <a href="/api/dataviz/chart#configuration-series.errorBars.xValue"><code>series.errorBars.xValue</code></a> or <a href="/api/dataviz/chart#configuration-series.errorBars.yValue"><code>series.errorBars.yValue</code></a> options or both.</p>

<h3 id="set-numeric-value"><a href="#set-numeric-value">Set Numeric Value</a></h3>

<p>If the error bars value is set to a number (must not be negative), the low and high value are calculated by subtracting or adding the value to the series value.</p>

<p>The example below demonstrates how to set a numeric values for categorical series.</p>

<h6>Example</h6>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    type: "column",
    errorBars: {
      value: 1
    },
    data: [{value: 4.743}, {value: 7.295}, {value: 6.376}]
  }]
});
&lt;/script&gt;
</code></pre>

<p>The example below demonstrates how to set a numeric values for scatter series.</p>

<h6>Example</h6>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    errorBars: {
      yValue: 2
    },
    data: [{x: 6.4, y: 13.4}, {x: 1.7, y: 11}, {x: 5.4, y: 8}]
  }]
});
&lt;/script&gt;
</code></pre>

<h3 id="set-array-values"><a href="#set-array-values">Set Array Values</a></h3>

<p>The difference can also be set separately for the low and high value by setting an array with two numeric values. In this case, the low value is calculated by subtracting the array first value from the point value. The high value is calculated by adding the second value to the point value.</p>

<p>The example below demonstrates how to set an array for categorical series.</p>

<h6>Example</h6>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    type: "column",
    errorBars: {
      value: [0.7, 1]
    },
    data: [{value: 4.743}, {value: 7.295}, {value: 6.376}]
  }]
});
&lt;/script&gt;
</code></pre>

<p>The example below demonstrates how to set an array for scatter series.</p>

<h6>Example</h6>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    errorBars: {
      yValue: [1, 2]
    },
    data: [{x: 6.4, y: 13.4}, {x: 1.7, y: 11}, {x: 5.4, y: 8}]
  }]
});
&lt;/script&gt;
</code></pre>

<h3 id="set-percentage-values"><a href="#set-percentage-values">Set Percentage Values</a></h3>

<p>It is also possible to set the difference of the point value as percentage. To achieve this, set a string value in the format <code>"percenatage(n)"</code> where <code>n</code> indicates the percent value, as demonstrated in the example below.</p>

<h6>Example</h6>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{        
    errorBars: {
      value: "percentage(20)"
    },
    data: [{value: 4.743}, {value: 7.295}, {value: 6.376}]
  }]
});
&lt;/script&gt;
</code></pre>

<h3 id="set-statistical-values"><a href="#set-statistical-values">Set Statistical Values</a></h3>

<p>The error bars support statistical calculations based on the series data. The supported types are <a href="http://en.wikipedia.org/wiki/Standard_error">standard error</a> and <a href="http://en.wikipedia.org/wiki/Standard_deviation">population standard deviation</a>. To specify that standard error is to be used, set <code>"stderr"</code> as a value. To use standard deviation, set <code>"stddev"</code> with an optional number between parentheses appended at the end. The number is going to be multiplied by the calculated standard deviation value.</p>

<p>The example below demonstrates how to use the standard error type.</p>

<h6>Example</h6>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    errorBars: {
      value: "stderr"
    },
    data: [{value: 4.743}, {value: 7.295}, {value: 6.376}]
  }]
});
&lt;/script&gt;
</code></pre>

<p>The example below demonstrates how to use the standard deviation type.</p>

<h6>Example</h6>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{    
    errorBars: {
      value: "stddev(0.5)"
    },
    data: [{value: 4.743}, {value: 7.295}, {value: 6.376}]
  }]
});
&lt;/script&gt;
</code></pre>

<h3 id="calculate-low-and-high-values"><a href="#calculate-low-and-high-values">Calculate Low and High Values</a></h3>

<p>If a custom algorithm is needed to calculate the low and high value, specify a function. The function accepts an object and returns a valid error bar value. The following fields as object parameters are available:</p>

<ul>
<li>
<code>dataItem</code>—The point data item.</li>
<li>
<code>value</code>—The point value.</li>
<li>
<code>index</code>—The point index in the series data.</li>
<li>
<code>category</code>—The point category value if a categorical chart is used.</li>
<li>
<code>series</code>—The series configuration.</li>
</ul>

<p>The example below demonstrates how to use different percentages for the low and high value.</p>

<h6>Example</h6>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    errorBars: {
      value: function(data) {          
          var value = data.value,
            lowPercentage = value * 0.05,
            highPercentage = value * 0.1;                                    
          return [lowPercentage, highPercentage];
      }
    },
    data: [{value: 4.743}, {value: 7.295}, {value: 6.376}]
  }]
});
&lt;/script&gt;
</code></pre>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on Kendo UI Charts:</p>

<ul>
<li><a href="/controls/charts/overview">Overview of the Chart Widgets</a></li>
<li><a href="/controls/charts/data-binding">Data Binding</a></li>
<li><a href="/controls/charts/date-series">Date Series</a></li>
<li><a href="/controls/charts/features/tooltip">Tooltip</a></li>
<li><a href="/controls/charts/features/notes">Chart Notes</a></li>
<li><a href="/controls/charts/features/title-legend">Title and Legend</a></li>
<li><a href="/controls/charts/appearance">Appearance</a></li>
<li><a href="/controls/charts/series">Data Series Charts</a></li>
<li><a href="/controls/charts/chart-types/area-charts">Types of Kendo UI Charts</a></li>
<li><a href="/api/javascript/dataviz/ui/chart">Chart JavaScript API Reference</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

